<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:12:31
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="">
    <div class="header">
      <el-page-header content="订单详细" @back="goBack" />
    </div>
    <div class="custerInfonation">
      <div
        v-for="(dataList, index) in orderDetailed.list"
        :key="index"
        class="orderList"
      >
        <!-- 订单头 订单编号 完成状态 -->
        <div class="orderBasicData">
          <span style="margin-left: 2%">订单编号：{{ dataList.id }}</span>
          <span
            style="margin-left: 15%"
          >下单时间：{{ dataList.orderTime | fmtDate_global }}</span>
          <span style="margin-left: 15%">订单状态：</span><el-tag type="success">{{ dataList.status }}</el-tag>
          <span style="margin-left: 15%">支付总额：<span style="font-size: 20px; color: red;">{{ dataList.total }}</span>元</span>
        </div>
        <!-- 顾客信息 -->
        <div class="information">
          <div class="customerInformation">
            <div style="margin-top: 2%; margin-left: 2%">顾客信息</div>
            <div style="margin-top: 4%; text-align: center">
              姓名：<span>{{ dataList.customer.realname }}</span>
            </div>
            <div style="margin-top: 2%; text-align: center">
              电话：{{ dataList.customer.telephone }}
            </div>
            <div style="margin-top: 2%; text-align: center">
              地址：{{ dataList.customer.address }}
            </div>
          </div>
          <div class="addressInformation">
            <div style="margin-top: 2%; margin-left: 2%">配送信息</div>
            <div style="margin-top: 4%; text-align: center">
              姓名:{{ dataList.address.realname }}
            </div>
            <div style="margin-top: 2%; text-align: center">
              电话：{{ dataList.address.telephone }}
            </div>
            <div style="margin-top: 2%; text-align: center">
              地址：{{ dataList.address.province }}{{ dataList.address.city
              }}{{ dataList.address.area }}{{ dataList.address.address }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="productInfonation" style="font-size: 10px">
      <div style="padding-top: 1%; margin-left: 1%">订单详细</div>
      <div
        v-for="item in orderDetailed.list[0].orderLines"
        :key="item.id"
        class="detailedData"
        style="display: flex;flex-direction: row;"
      >
        <div style="margin-top: 2%; padding-left: 2%">
          <el-image
            style="height: 120px; "
            :src="item.product.photo"
          >
            <div slot="placeholder" style="height: 120px" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div style="width: 50%; padding-top: 4%;padding-left: 3%">
          <div><span>商品名称：</span>{{ item.product.name }}</div>
          <div><span>商品介绍：</span>{{ item.product.description }}</div>
          <div>
            <span>客户备注：</span><span v-if="item.product.details == ''">无</span>
            <span v-else>{{ item.product.details }}</span>
          </div>
        </div>
        <div style="width:30%; padding-top: 4%;padding-left: 5%">
          <div>商品单价：<span style="font-size:16px;color: red">{{ item.product.price }}</span>/{{ item.product.unit }}</div>
          <div>数量：<span style="font-size:16px;color: red">{{ item.num }}</span>{{ item.product.unit }}</div>
          <div>支付总额：<span style="font-size:16px;color: red">{{ item.price * item.num }}</span>元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  // 组件名称
  name: 'Demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      product: []
    }
  },
  // 计算属性
  computed: {
    ...mapState('orderView', ['orderDetailed'])
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    ...mapActions('orderView', ['getOrderDetailedVuex']),
    getDetailedData() {
      this.getOrderDetailedVuex({
        page: 1,
        pageSize: 10,
        id: this.$route.query.id
      })
      // this.product = this.orderDetailed;
      // this.product = {...this.orderDetailed}

      // console.log(this.orderDetailed.list.orderLines);
      // console.log(this.product);
    },

    goBack() {
      this.$router.go(-1)
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getDetailedData()
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.orderBasicData {
  background-color: #f5f5f5;
  height: 40px;
}
.orderBasicData span {
  font-size: 14px;
  margin-top: 8px;
}
.orderList {
  margin-top: 10px;
  max-height: 250px;
  height: 400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* background-color: springgreen; */
}
.information {
  width: 100%;
  display: flex;
  flex-direction: row;

}
.customerInformation {
  width: 45%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  height: 150px;
  margin-left: 3%;
  margin-top: 2%;

}
.information div div {
  font-size: 10px;
}
.addressInformation {
  width: 45%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  height: 150px;
  margin-left: 3%;
  margin-top: 2%;
}

.productInfonation {
  margin-top: 10px;
  /* max-height: 250px; */
  /* height:500px; */
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.detailedData{
  box-shadow: 0 1px 0px 0px rgba(0, 0, 0, .12), 0 0 0px rgba(0, 0, 0, .04)
}
</style>
